// config-overrides.js
const { override, addWebpackAlias, addWebpackModuleRule, overrideDevServer, watchAll  } = require('customize-cra');
const path = require('path');
const addLessLoader = require("customize-cra-less-loader")


// 跨域配置
const devServerConfig = () => config => {
    return {
      ...config,
      // 服务开启gzip
      compress: true,
      open: false,
      port: 3001,
      proxy: {
        '/api': {
          target: 'xxx',
          changeOrigin: true,
          pathRewrite: {
            '^/api': '/api',
          },
        }
      }
    }
  }

module.exports = {
    webpack: override(
        addWebpackModuleRule({
           test: /.less?$/,
           use: [
            {
              loader: 'style-loader', // 将 JS 字符串生成为 style 节点
            },
            {
              loader: 'css-loader', // 将 CSS 转化成 CommonJS 模块
              options: {
                modules: {
                  localIdentName: '[local]--[hash:base64:5]', // CSS Modules 的标识符命名规则
                },
                importLoaders: 2, // 用于确定 css-loader 应应用多少个加载器，这里为 2，意味着会应用 css-loader 和 less-loader
              },
            },
            {
              loader: 'postcss-loader', // 用于处理 CSS 兼容性问题
            },
            {
              loader: 'less-loader', // 将 Less 文件编译成 CSS 文件
            },
          ]
        }),
        addWebpackAlias({
          '@': path.resolve(__dirname, 'src'), // 设置别名 '@' 指向 src 目录
        }),
        addLessLoader({
          lessLoaderOptions: {
            lessOptions: {
              javascriptEnabled: true,
              localIdentName: '[local]--[hash:base64:5]'
            }
          },
          cssLoaderOptions: {
              modules: {
                localIdentName: '[name]-[hash]'
              }
          },
        })
    )
}